<template>
	<view class="page-item" :style="backgroundStyle">
		<view class="pen-box">
			<view class="arrow-left-item" @click="handleRetuen">
				<uv-icon name="arrow-left" size="22px" color="#fff"></uv-icon>
			</view>
			<view class="pen-text">预约详情</view>
			<view class=""></view>
		</view>

		<view class="content">
			<!-- 访客端显示 被访客端隐藏 -->
			<view class="head-box">
				<view class="result-head">
					<view class="head-img">
						<image :src="currentHeadConfig.imgUrl" mode=""></image>
					</view>
					<view class="head-title">{{ currentHeadConfig.title }}</view>
				</view>
				<view class="head-tips">{{ currentHeadConfig.tips }}</view>
			</view>
			<view class="user-info">
				<view class="by-box">
					<view class="by-name">被访人姓名</view>
					<view class="by-info">{{infoList && infoList.intervieweeName}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">所属部门</view>
					<view class="by-info">{{ infoList && infoList.intervieweeDepartName}}</view>
				</view>
			</view>
			<view class="user-info">
				<view class="visitor-tips">
					访客信息
				</view>
				<view class="by-box">
					<view class="by-name">来访姓名</view>
					<view class="by-info">{{infoList &&  infoList.visitorName}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">联系电话</view>
					<view class="by-info">{{infoList &&  infoList.visitorPhone}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">访客证件类型</view>
					<view class="by-info">{{infoList &&  infoList.visitorCardTypeName}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">来访时间</view>
					<view class="by-info">{{infoList &&  infoList.visitorBeginDate}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">结束时间</view>
					<view class="by-info">{{ infoList &&  infoList.visitorEndDate}}</view>
				</view>
				<view class="by-box">
					<view class="by-name">随访人数</view>
					<uni-table border stripe emptyText="暂无随访人数">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center" width="60px" >姓名</uni-th>
							<uni-th align="center" width="60px">证件号</uni-th>
							<uni-th align="center" width="50px">工牌号<span class="heavy">*</span></uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in infoList.followPeopleList" :key="index">
							<uni-td align="center">{{item.visitorName}}</uni-td>
							<uni-td align="center">{{item.visitorCardNumber}}</uni-td>
							<uni-td>
								<view class="" style="width: 50px;">
									<input type="text" v-model="item.workNo" placeholder="请填写" />
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="by-box">
					<view class="by-name">车牌号</view>
					<view class="by-info">{{infoList &&  infoList.visitorCarNumber}}</view>
				</view>
			</view>
			<view class="user-info">
				<view class="visitor-tips" style="border: none;">
					备注
				</view>
				<view class="">
					<uv-textarea v-model="reasonVal" :placeholder="placeholderText" disabled></uv-textarea>
				</view>
			</view>
			<!-- 保安端 -->
			<!-- infoList.visitStatus !== 2 && -->
			<div class="operation" v-if="isVisitStu == 1">
				<view class="agree" @click="hnadleReview(1)">
					<view class="">
						<uv-icon name="checkbox-mark" color="#fff" size="20"></uv-icon>
					</view>
					确认放行
				</view>
				<view class="Away" @click="hnadleReview(2)">
					<view class="">
						<uv-icon name="clock" color="#fff" size="20"></uv-icon>
					</view>
					暂时离开
				</view>
				<view class="refuse" @click="hnadleReview(3)">
					<view class="">
						<uv-icon name="close" color="#fff" size="20"></uv-icon>
					</view>
					确认离开
				</view>
			</div>
			<div class="operation-tips" v-if="infoList.auditStatus == 3">
				本次访问已结束！
			</div>
		</view>

	</view>
</template>

<script setup>
	import {
		useStore
	} from 'vuex'
	import {
		ref,
		onMounted,
		computed,
		watch
	} from 'vue'
	import {
		$get,
		$post
	} from "@/utils/request.js"


	const store = useStore() //引入vueX

	//1访客 2被访客 3保安
	const userType = ref('1')
	// const isDisabled = ref(true)
	const placeholderText = ref('暂无内容...')
	const recordId = ref(null)


	//查询详情信息
	const infoList = ref(null)
	const reasonVal = ref('') //备注数据
	const getInfo = (id) => {
		$get('/system/visitorInfo/getInfo', {
			id: id
		}).then(res => {
			infoList.value = res.data
			reasonVal.value = res.data?.auditRecordList?.[0]?.reason || '';
		})

	}


	// 返回上一页
	const handleRetuen = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	// 拜访状态 0待审核 1已通过 2已拒绝 3已结束
	const isVisitStu = ref(null)
	const colorMap = {
		0: '#FFB400',
		1: '#056DFA',
		2: '#33B723',
		3: '#727272',
		4: "#056DFA",
		5: '#727272'

	}
	const backgroundStyle = computed(() => {
		const primaryColor = colorMap[isVisitStu.value] || colorMap[1]

		return {
			width: '100vw',
			minHeight: '100vh',
			backgroundImage: `linear-gradient(to bottom, ${primaryColor} 50%, #eff4fb)`,
			backgroundSize: '100% 400px',
			backgroundRepeat: 'no-repeat',
			backgroundColor: '#eff4fb'
		}
	})

	const headConfigMap = {
		0: {
			imgUrl: '/static/icon/icon-8.png',
			title: '等待被访人审批',
			tips: '结果将会以短信或者微信通知发送给您'
		},
		1: {
			imgUrl: '/static/icon/icon-9.png',
			title: '预约成功',
			tips: '请留意行程，携带有效身份证件准时到访。'
		},
		2: {
			imgUrl: '/static/icon/icon-10.png',
			title: '您的申请已被拒绝',
			tips: '暂无法接待，请与被访人另约。谢谢理解!'
		},
		3: {
			imgUrl: '/static/icon/icon-11.png',
			title: '拜访已结束',
			tips: '本次拜访已结束，期待下次再见'
		},
		4: {
			imgUrl: '/static/icon/icon-11.png',
			title: '拜访中',
			tips: '拜访进行中'
		},
		5: {
			imgUrl: '/static/icon/icon-11.png',
			title: '拜访已结束',
			tips: '本次拜访已结束，期待下次再见'
		},

	}

	const currentHeadConfig = computed(() => {
		// 默认使用ID=1的配置
		return headConfigMap[isVisitStu.value] || headConfigMap[1]
	})

	// 查看邀请码
	const handleToCode = () => {
		console.log(infoList.value.id, '详情');
		uni.navigateTo({
			url: `/pages/invitation/invitation?id=${infoList.value.id}`
		})
	}

	// 被访审核操作
	const itemVal = ref(null)
	const hnadleReview = (val) => {
		const form = {
			id: infoList.value.id,
			status: val,
			workBoList: infoList.value.followPeopleList
		}
		console.log('form', form)
		
		let allHaveWorkNo = true;
		
		for (let i = 0; i < form.workBoList.length; i++) {
			const item = form.workBoList[i];
			if (!item.workNo || item.workNo.trim() === '') {
				allHaveWorkNo = false;
				break;
			}
		}
		
		if (!allHaveWorkNo) {
			uni.showToast({
				title: '所有人员的工牌号都不能为空',
				icon: 'none'
			});
			return;
		}
		
		$post(`/system/visitorInfo/visit`, form).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: 'success',
					title: '放行成功',
				})
				
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/record/record'
					})
				},2000)
				
				
			} else {
				uni.showToast({
					icon: 'error',
					title: res.msg
				})
			}
		});
	}
	onMounted(() => {

		// 获取当前页面参数
		const currentPage = getCurrentPages().at(-1);
		const {
			itemStr,
		} = currentPage.options;
		const item = ref(null)
		if (itemStr) {
			const item = JSON.parse(decodeURIComponent(itemStr));
			isVisitStu.value = item.auditStatus;
			getInfo(item.id)
			itemVal.value = item.value
		} else {
			isVisitStu.value = 1
			const currentPage = getCurrentPages().at(-1);
			const {
				itemStrCode
			} = currentPage.options;
			const item = ref(null)
			if (itemStrCode) {
				item.value = JSON.parse(decodeURIComponent(itemStrCode));
				getInfo(item.value)
				itemVal.value = item.value
			}

		}

	});


	watch(() => store.getters.getRoles, (newgetRoles) => {

		console.log(store.getters.getRoles, '身份');
		if (newgetRoles) {
			userType.value = newgetRoles[0];
		}

		// if (userType.value === '2') {
		// 	isDisabled.value = false
		// 	placeholderText.value = '请输入...'
		// } else {
		// 	isDisabled.value = true
		// 	placeholderText.value = '暂无内容...'
		// }
	}, {
		immediate: true,
		deep: true
	})
</script>

<style lang="scss">
	// .page-item {
	// 	width: 100vw;
	// 	min-height: 100vh;
	// 	background-image: linear-gradient(to bottom, #33b722 50%, #eff4fb);
	// 	background-size: 100% 400px;
	// 	background-repeat: no-repeat;
	// 	background-color: #eff4fb;
	// }


	.pen-box {
		width: 100%;
		height: 100px;
		padding: 0 10px;
		padding-top: 30px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pen-text {
			font-size: var(--font-16);
			color: var(--color-ff);
			font-weight: 600;

		}


	}

	.content {
		width: 100vw;
		height: auto;
		padding: 20px 20px;
		box-sizing: border-box;

		.head-box {
			.result-head {
				display: flex;
				align-items: center;
				gap: 10px;

				.head-img {
					width: 30px;
					height: 30px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.head-title {
					color: var(--color-ff);
					font-weight: 800;
					font-size: var(--font-21);
				}

				.check-item {
					padding: 4px 10px;
					background-color: #fff;
					border-radius: 50px;
					color: #056DFA;
					font-size: var(--font-16);

				}

			}

			.head-tips {
				color: #FEFBF2;
				font-size: var(--font-16);
				padding-left: 42px;
				padding-top: 6px;
				box-sizing: border-box;
			}
		}

		.user-info {
			width: 100%;
			height: auto;
			background-color: #fff;
			border-radius: 10px;
			margin: 20px 0px;
			padding: 20px;
			box-sizing: border-box;

			.by-box {
				display: flex;
				flex-direction: column;
				gap: 6px;
				margin: 14px 0;
				.heavy {
					color: red;
					font-size: var(--font-16);
				}

				.by-name {
					color: var(--color-333);
					font-size: var(--font-16);
				}

				.by-info {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 800;
				}

				.by-info-item {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 800;
					display: flex;
					gap: 10px;
				}
			}

			.visitor-tips {
				width: 100%;
				padding: 10px 0px;
				box-sizing: border-box;
				border-bottom: 1px solid #e8e8e8;
				color: var(--color-333);
			}



		}

		.operation-tips {
			width: 100%;
			height: 40px;
			background-color: #999999;
			color: #fff;
			border-radius: 50px;
			text-align: center;
			line-height: 40px;
		}

		.operation {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 18px;
			margin: 20px 0;

			.agree,
			.refuse,
			.Away{
				width: 30%;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50px;
				color: var(--color-ff);
				font-size: var(--font-16);
			}


			.agree {
				background-color: #1CB619;
			}

			.refuse {
				background-color: #FA4C00;
			}
			
			.Away{
				background-color: orange;
			}

		}


	}
</style>